<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div
      class="coach_enroll_history_body"
      v-infinite-scroll="loadingListFn"
      infinite-scroll-disabled="listLoadingKey"
      infinite-scroll-distance="10"
      v-if="enrollHistoryList.length > 0"
    >
      <!-- 报名列表 -->
      <div class="coach_enroll_history_list">
        <div
          class="coach_enroll_history_list_item"
          v-for="(item, index) in enrollHistoryList"
          :key="index"
          @click="toEnrollDetailFn(item.id)"
        >
          <img
            v-if="item.image_path != '' && item.image_path != null"
            class="coach_enroll_history_list_item_img"
            :src="baseAPIUrl + item.image_path"
          />
          <img
            v-else
            class="coach_enroll_history_list_item_img"
            src="../../assets/image/coach_enroll_logo01.png"
          />
          <div class="coach_enroll_history_list_item_right">
            <div class="coach_enroll_history_list_item_title">
              {{ item.title }}
            </div>
            <div class="coach_enroll_history_list_item_bottom">
              <div class="coach_enroll_history_list_item_time">
                {{ item.created_at }}
              </div>
              <div class="coach_enroll_history_list_item_money">
                ￥{{ item.exam_money }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="coach_enroll_history_body" v-else>
      <div class="empty_box">
        <img class="empty_icon" src="../../assets/image/empty_icon02.png" />
        <div class="empty_name">暂无报名</div>
      </div>
    </div>
  </div>
</template>
<style src="../../assets/css/enroll/coachEnrollHistoryList.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { Toast } from "mint-ui";

export default {
  name: "CoachEnrollHistoryList",
  components: {
    HomeTop,
  },
  data() {
    return {
      topTitle: "我的报名", // 顶部组件参数设置
      enrollHistoryList: [], // 报名活动列表数据
      listLoadingKey: false, // 加载数据控制
      page: 1, // 当前页
      perPage: 10, // 每页数据数
      count: 0, // 数据总条数
      baseAPIUrl: this.$store.state.baseAPIUrl,
    };
  },
  created: function () {
    this.page = 1;
    this.getListDataFn();
  },
  methods: {
    // 查询考场列表数据
    getListDataFn: function () {
      let that = this;
      let url = "/mobile/myenrolls";
      let data = {
        page: this.page,
        perPage: this.perPage,
        keywords: "",
      };
      this.axios
        .post(url, data)
        .then((response) => {
          if (response.code == 0) {
            that.listLoadingKey = false;
            if (this.page == 1) {
              that.enrollHistoryList = response.orderinfo;
            } else {
              that.enrollHistoryList = that.enrollHistoryList.concat(
                response.exam_list
              );
            }
            that.count = response.total_count;
          } else {
            that.listLoadingKey = false;
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          that.listLoadingKey = false;
          console.log(error);
        });
    },
    // 滚动加载
    loadingListFn: function () {
      this.listLoadingKey = true;
      if (this.enrollHistoryList.length < this.count) {
        this.page = this.page + 1;
        this.getListDataFn();
      }
    },
    // 查看报名详情
    toEnrollDetailFn: function (id) {
      this.$router.push({
        name: "CoachEnrollOrderDetail",
        query: {
          orderId: id,
        },
      });
    },
  },
};
</script>
